import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Table, Pagination, Popconfirm } from 'antd';
import { getBuild, buildInit } from '../../../action/actionBuild';
import PaginationConfig from '../../../config/pagination';
class BuildManagement extends Component {
    constructor () {
        super();
        this.query = {
            page: 1,
            page_size: 30,
        };
        const that = this;
        this.pageConfig = Object.assign({}, PaginationConfig, {
            pageSize: that.query.page_size,
            onChange (page, pageSize) {
                that.pageChangeHandle(page, pageSize);
            },
        });
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                width: 60,
                render: (text, record, index) => <div>{(this.pageConfig.current - 1) * this.pageConfig.pageSize + index + 1}</div>,
            },
            {
                title: '城市',
                width: 100,
                dataIndex: 'city_id',
            },
            {
                title: '行政区',
                dataIndex: 'area_id',
                width: 100,
            },
            {
                title: '大厦',
                dataIndex: 'title',
            },
            {
                title: '状态',
                dataIndex: 'is_frozen',
                width: 70,
                render: (text, record) => <span>{record.is_frozen ? <span style={{ color: '#F05584' }}>冻结</span> : <span>正常</span>}</span>,
            },
            {
                title: '操作',
                dataIndex: 'geo',
                render: (text, record) => <div>
                    {
                        <a href="javascript:void(0)">编辑</a>
                    }
                    {
                        <span>
                            <span className='ant-divider'></span>
                            <Popconfirm placement='topRight' title={record.is_frozen ? '确认解冻?' : '确认冻结?'} >
                                <a>{record.is_frozen ? '解冻' : '冻结'}</a>
                            </Popconfirm>
                        </span>
                    }
                </div>,
            },
        ];
    }
    pageChangeHandle (page, pageSize) {
        this.pageConfig.current = this.query.page = page;
        this.query.page_size = pageSize;
        this.getList();
    }
    getList () {
        const { dispatch } = this.props;
        dispatch(getBuild({
            query: this.query,
        }));
    }
    componentWillMount () {
        const { isFetching, build } = this.props;
        if (isFetching === 'success' && typeof (build) === 'object' && build.code === 0) return;
        this.getList();
    }
    componentWillUnmount () {
        const { dispatch } = this.props;
        dispatch(buildInit());
    }
    render () {
        const { build, isFetching } = this.props;
        let data = [];
        let total = 0;
        if (typeof (build) === 'object' && build.code === 0) {
            data = build.items;
            total = build.counts;
            this.pageConfig.current = build.page * 1;
        }
        this.pageConfig.total = total;
        return (
            <div className='app-admin-main'>
                <div className='table-wrapper'>
                    <div className='table-wrapper_table'>
                        {<Table pagination={false} loading={isFetching === 'isFetching'} rowKey={record => record.id} columns={this.columns} dataSource={data} />}
                        <Pagination {...this.pageConfig} />
                    </div>
                </div>
            </div>
        );
    }
}
function select (state) {
    return {
        build: state.buildList.build,
        isFetching: state.requestStatus.status,
    };
}
export default connect(select)(BuildManagement);
